<template>
  <div class="post">
    <van-cell-group>
      <van-field v-model="title" label="标题" placeholder="点击请输入文章标题"/>
    </van-cell-group>
    <div class="text_list">
      <div class="adder">
        <van-icon name="add-o" @click="addFist"></van-icon>
        <div class="adder_main" v-show="addFirstNow">
          <span @click="addFirstPic">图片</span>
          <span @click="addFirstPic">视频</span>
          <span @click="addText(0), addFirstNow = false">文字</span>
        </div>
      </div>
    </div>
    <div class="text_list" v-for="(item, index) of list" :key="item">
      <div class="text_item">
        <img v-if="item.type === 'pic'" :src="imageURL" alt>
        <!-- <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> -->
        <van-field v-model="item.message" type="textarea" placeholder="请输入内容" rows="1" autosize/>
        <van-icon name="close" @click="del(index)"/>
      </div>
      <div class="adder">
        <van-icon name="add-o" @click="addNew(index)"></van-icon>
        <div class="adder_main" v-show="item.addNow">
          <span @click="addPic(index)">图片</span>
          <span @click="addPic(index)">视频</span>
          <span @click="addText(index + 1), list[index].addNow = false">文字</span>
        </div>
      </div>
      <!-- <div class="text_adder">
        <van-uploader :after-read="onRead">
          <van-icon name="plus"/>
        </van-uploader>
        <van-field v-model="message" type="textarea" placeholder="请输入内容" rows="1" autosize/>
      </div>-->
    </div>
    <div class="footer">
      <van-button style="margin-top:30px;" type="primary" size="small">发布帖子</van-button>
    </div>
    <input @change="fileChange" ref="fileUpload" class="fileUpload" type="file">
  </div>
</template>
<script>
import { Field, Uploader, CellGroup, Icon, Button } from 'vant'
export default {
  components: {
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [Button.name]: Button
  },
  data() {
    return {
      list: [
        {
          addNow: false,
          message:
            '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
          type: 'pic'
        },
        {
          addNow: false,
          message:
            '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
          type: 'pic'
        },
        {
          addNow: false,
          message:
            '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
          type: 'pic'
        }
      ],
      title: '',
      message: '',
      imgArr: [],
      imageURL:
        'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
      addFirstNow: false,
      addIndex: 0,
      addType: 'pic'
    }
  },
  methods: {
    onRead(file) {},
    addNew(index) {
      this.addFirstNow = false
      for (let i = 0; i < this.list.length; i++) {
        if (index === i) {
          this.list[i].addNow = !this.list[i].addNow
        } else {
          const e = this.list[i]
          e.addNow = false
        }
      }
    },
    addFist() {
      this.addFirstNow = !this.addFirstNow
      for (let i = 0; i < this.list.length; i++) {
        const e = this.list[i]
        e.addNow = false
      }
    },
    addPic(index) {
      this.list[index].addNow = false
      this.addIndex = index + 1
      this.addType = 'pic'
      this.$refs.fileUpload.click()
    },
    addText(index) {
      const arr = [...this.list]
      arr.splice(index, 0, {
        addNow: false,
        message: '',
        type: 'text'
      })
      this.list = arr
    },
    addFirstPic() {
      this.addFirstNow = false
      this.addIndex = 0
      this.addType = 'pic'
      this.$refs.fileUpload.click()
    },
    fileChange(file) {
      const arr = [...this.list]
      arr.splice(this.addIndex, 0, {
        addNow: false,
        message: '',
        type: this.addType
      })
      this.list = arr
      this.$refs.fileUpload.value = ''
    },
    del(index) {
      this.list.splice(index, 1)
    }
  }
}
</script>
<style lang="less" scoped>
.fileUpload {
  opacity: 0;
}
.post {
  padding: 10px 10px;
  box-sizing: border-box;
  background-color: #fff;
  .van-uploader {
    width: 70px;
    height: 70px;
    border: 1px dashed #e5e5e5;
    position: relative;
    flex-shrink: 0;
    .van-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .img_list {
    margin-top: 10px;
    margin-bottom: 10px;
    .img {
      width: 100px;
      height: 100px;
    }
  }
  .footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
  }
}
.text_adder {
  display: flex;
  width: 100%;
  padding-top: 10px;
  .van-field {
    border: 1px dashed #e5e5e5;
    font-size: small;
    margin-left: 5px;
    width: 100%;
  }
}
.text_list {
  .adder {
    display: flex;
    justify-content: center;
    padding: 5px;
    flex-direction: column;
    align-items: center;
    position: relative;
    .adder_main {
      display: flex;
      border-radius: 5px;
      box-shadow: 0px 0px 10px #999;
      position: absolute;
      background: #fff;
      top: 30px;
      z-index: 999;
      span {
        padding: 5px;
        border-right: 1px solid #eee;
        font-size: 13x;
      }
      span:last-child {
        border-right: 0;
      }
    }
  }
  .text_item {
    display: flex;
    align-items: center;
    img {
      width: 70px;
      height: 70px;
      object-fit: cover;
      flex-shrink: 0;
    }
    p {
      padding: 10px;
      font-size: small;
      height: 70px;
      overflow: hidden;
      margin: 0;
    }
  }
}
</style>
